<template>
    <div>
        <Header></Header>
        <div style="width: 850px;display: inline-block; margin:0px auto;">

        <!-- 面包屑导航 -->
        <div class="nav-wrap">
            <p class="nav-p-pc" style="margin-top:25px;text-align:left;">
                <a href="/">课程列表</a>
                <span class="sharp-content"> &gt; </span>
                <span class="nav-sec">账号设置</span>
            </p>
        </div>

        <div class="container">
            <div class="left-content">
                <div class="label-item" @click="changeItem('set')"
                        v-bind:class="{'label-active':selItem=='set'}">
                    基本设置
                </div>
                <div class="label-item" @click="changeItem('pwd')"
                        v-bind:class="{'label-active':selItem=='pwd'}">
                    修改密码
                </div>
            </div>
            <div class="right-content">
                <div v-if="selItem=='set'">
                    <el-form label-position="top" align="left" :model="user">
                        <el-form-item label="头像">
                            <img :src="user.content.portrait" style="height:90px;width:90px;border-radius: 45px"/>
                            <el-upload
                                    action="http://localhost:80/user/uploadUserImage"
                                    :multiple="false"
                                    :show-file-list="false"
                                    :on-success="uploadHandle">
                                <el-button size="small" type="default">
                                    <i class="el-icon-upload2"></i>
                                    更换头像
                                </el-button>
                            </el-upload>
                        </el-form-item>
                        <el-form-item label="昵称">
                            <el-input v-model="user.content.name"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="default" class="update-info" @click="onSubmit">更新信息</el-button>
                        </el-form-item>
                    </el-form>
                </div>
                <div v-if="selItem=='pwd'">
                    <div class="label-pwd">
                        <div class="main-title">
                            <div class="title-left">
                                账户密码
                            </div>
                            <div class="title-right" @click="dialogVisible = true">
                                修改密码
                            </div>
                        </div>
                        <div class="sub-title">
                            ******
                        </div>
                    </div>
                </div>
            </div>
        </div>
        </div>
        <Footer></Footer>

        <!-- 修改密码框 -->
        <el-dialog
                title="修改密码"
                align="left"
                :visible.sync="dialogVisible"
                width="35%">
            <el-form label-position="left" label-width="80px" status-icon
                     :rules="pwdRules" :model="userPwd" ref="userPwd">
                <el-form-item label="当前密码" prop="oldPassword">
                    <el-input type="password" v-model="userPwd.oldPassword"></el-input>
                </el-form-item>
                <el-form-item label="新密码" prop="newPassword">
                    <el-input type="password" v-model="userPwd.newPassword"></el-input>
                </el-form-item>
                <el-form-item label="确认密码" prop="checkPassword">
                    <el-input type="password" v-model="userPwd.checkPassword"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button type="default" style="background: #00b38a;color: #fff0ff;"
                           @click="changePwd">确 定</el-button>
                <el-button @click="dialogVisible = false">取 消</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import Header from "./Header/Header"; //顶部登录条
import Footer from "./Footer/index"; //顶部登录条
export default {
  name: "Index",
  components: {
    Header,
    Footer,
  },
data() {
    // 确认密码校验
    var validatePass = (rule, value, callback) => {
        debugger
        console.log(this);
        if (value === '') {
            callback(new Error('请再次输入密码'));
        } else if (value !== this.userPwd.newPassword) {
            callback(new Error('两次输入密码不一致!'));
        } else {
            callback();
        }
    };

    var validateOldPass = (rule,value,callback) =>{
        const user = JSON.parse(localStorage.getItem("user"));
        debugger
         if (value === ''){
            callback(new Error('请再次输入密码'))
        } else if (value !== user.content.password){
            callback(new Error('密码错误'))
        }else{
            callback();
        }
    };
    return {
        user: {},
        selItem: 'set',
        dialogVisible: false,
        userPwd: {
            oldPassword: "",
            newPassword: "",
            checkPassword: ""
        },
        pwdRules: {
            oldPassword: [
                {required: true, message: '请输入当前密码', trigger: 'blur'},
                {validator:validateOldPass, trigger:'blur'}
            ],
            newPassword: [
                {required: true, message: '请输入新的密码', trigger: 'blur'}],
            checkPassword: [
                {required: true, message: '请输入新的密码', trigger: 'blur'},
                {validator: validatePass, trigger: 'blur'}]
        }
    };
},
    created() {
        debugger
        this.user = JSON.parse(localStorage.getItem("user"));
        if (this.user == null) {
            this.$router.push("/")
        }
        console.log("用户的ID为：" + this.user.content.id);
    },
    methods: {
        changeItem(item) {
            this.selItem = item;
        },
        uploadHandle(resp, file, fileList) {
            debugger
            let url = "http://192.168.123.128/";
            if (resp.status = 200) {
                this.user.content.portrait = url + resp.content;
                this.$message.success(resp.message);
            } else {
                this.$message.error(resp.message);
            }
        },
        onSubmit() {
            this.axios.post("http://localhost:80/user/updateUserInfo", {
                
                id: this.user.content.id,
                name: this.user.content.name,
                portrait: this.user.content.portrait 
            }).then(resp => {
                debugger
                if (resp.data.state == 200) {
                    localStorage.setItem("user", JSON.stringify(this.user));
                    this.$message.success(resp.data.message);
                } else {
                    this.$message.error(resp.data.message);
                }
            });
        }, 
        changePwd() {
            this.$refs.userPwd.validate((valid) => {
                if (valid) {
                    debugger
                    // 提交修改申请
                    this.axios.post("http://localhost:80/user/updatePassword", {
                            id: this.user.content.id,
                            password: this.userPwd.newPassword
                    }).then(resp => {
                        debugger
                        if (resp.data.state == 200) {
                            this.user.content.password = this.userPwd.newPassword;
                            this.$refs.userPwd.resetFields();
                            this.$message.success(resp.data.message);
                            localStorage.setItem("user", JSON.stringify(this.user));
                            this.dialogVisible = false;
                        } else {
                            this.$message.error(resp.data.message);
                        }
                    });
                }
            });
        }
    },
};
</script>

<style lang="less" scoped>
    @import "../assets/less/common.less";

    .container {
        margin: 30px auto 0;
        height: 400px;
        display: -webkit-box;
        display: -webkit-flex;
        display: flex;
    }

    .left-content {
        width: 234px;
        height: 100%;
        border-right: 1px solid #eee;

        .label-item {
            height: 39px;
            line-height: 39px;
            text-align: right;
            padding-right: 62px;
            font-size: 14px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #555;
            cursor: pointer;
        }

        .label-active {
            border-right: 2px solid #00b38a;
            color: #00b38a;
            -webkit-transform: translateX(1.5px);
            transform: translateX(1.5px);
        }
    }

    .right-content {
        width: 580px;
        height: 100%;
        margin-left: 50px;

        .update-info {
            background: #00b38a;
            color: #fff0ff;
        }

        .label-pwd {
            margin-top: 12px;
            width: 71%;
            height: 56px;
            box-sizing: border-box;

            .main-title {
                height: 30px;
                display: -webkit-box;
                display: -webkit-flex;
                display: flex;
                -webkit-box-pack: justify;
                -webkit-justify-content: space-between;
                justify-content: space-between;

                .title-left {
                    height: 30px;
                    font-size: 18px;
                    font-family: PingFangSC-Semibold, PingFang SC;
                    font-weight: 600;
                    color: #333;
                    line-height: 30px;
                }

                .title-right {
                    height: 30px;
                    font-size: 14px;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #5580c8;
                    line-height: 30px;
                    cursor: pointer;
                }
            }

            .sub-title {
                height: 26px;
                font-size: 14px;
                font-family: HiraginoSansGB-W3, HiraginoSansGB;
                font-weight: 400;
                color: #555;
                line-height: 26px;
                float: left;
            }
        }
    }
</style>